<style include="cr-shared-style shimless-rma-shared">
  #dialogBody {
    overflow-wrap: anywhere;
  }

  cr-input {
    --cr-input-error-display: none;
  }

  #inputValidationLabel {
    color: var(--google-grey-600);
  }

  :host([rsu-code-invalid_]) #inputValidationLabel {
    color: red;
  }

  #rsuCodeLengthLabel {
    float: right;
  }

  #inputContainer {
    width: 275px;
  }
</style>

<base-page orientation="column">
  <div slot="header">
    <h1>[[i18n('rsuCodePageTitleText')]]</h1>
    <div>
      <span inner-h-t-m-l="[[rsuInstructionsText_]]"></span>
    </div>
    <div id="inputContainer">
      <cr-input
          id="rsuCode"
          value="{{rsuCode_}}"
          pattern="[[rsuCodeValidationRegex_]]"
          invalid="{{rsuCodeInvalid_}}"
          auto-validate
          disabled="[[allButtonsDisabled]]">
      </cr-input>
      <div id="inputValidationLabel">
        [[i18n('rsuCodeLabelText')]]
        <span id="rsuCodeLengthLabel">[[rsuCodeLengthLabel_]]</span>
      </div>
    </div>
  </div>
  <div slot="body">
    <canvas id="qrCodeCanvas" width="[[canvasSize_]]" height="[[canvasSize_]]">
    </canvas>
  </div>
</base-page>

<cr-dialog id="rsuChallengeDialog" on-cancel="closeDialog_" ignore-popstate>
  <div slot="title">[[i18n('rsuChallengeDialogTitleText')]]</div>
  <div slot="body" id="dialogBody">[[rsuChallengeLinkText_]]</div>
  <div slot="button-container">
    <cr-button class="action-button" on-click="closeDialog_">
      [[i18n('rsuChallengeDialogDoneButtonLabel')]]
    </cr-button>
  </div>
</cr-dialog>